// components/pie-chart/pie-chart.js

Component({
  properties: {

  },
  data: {
    chartData: [{
      name: '待乘车',
      percent: 34,
      people: 1749
    }, {
      name: '已乘车',
      percent: 60,
      people: 3123
    }, {
      name: '待入园',
      percent: 6,
      people: 312
    }],
    mLegend: ['percent', 'people'],
    pieColors: ['#FE5D4D', '#3BA4FF', '#737DDE']
  },
  ready: function () {
    this.initPieChart()
  },
  methods: {
    //更新图表数据
    notifyChartData(params) {
      var chartComponent = this.selectComponent('#pie-chart');
      chartComponent.chart.changeData(params)
    },
    //初始化图表
    initPieChart(list, legend) {
      this.chartComponent = this.selectComponent('#pie-chart');
      this.chartComponent.init((canvas, width, height, F2) => {
        //此处data数据可通过 异步获取数据
        const chart = new F2.Chart({
          el: canvas,
          width,
          height,
          padding: [1, 200, 1, 10],
          appendPadding: [1, 60, 1, 1]
        });
        var data = list == null ? this.data.chartData : list
        console.log(data[0])
        this.initChartData(chart, data)
        this.initChartLegend(chart, data, legend)
        this.initChartCoord(chart)
        this.initChartCircle(chart)
        chart.render();
        return chart;
      })
    },
    //初始化数据
    initChartData(chart, data) {
      chart.source(data, {
        percent: {
          formatter: function formatter(val) {
            return val + '%';
          }
        }
      });
    },
    //设置图例
    initChartLegend(chart, data, legend) {
      var mLegend = legend == null ? this.data.mLegend : legend
      chart.legend({
        position: 'right',
        itemFormatter: function itemFormatter(val) {
          // console.log(val)
          var newData = data.filter(function (item, index) {
            return item.name == val
          })
          var pie = newData[0]
          return val + '    ' + pie[mLegend[0]] + '    ' + pie[mLegend[1]];
        }
      });
    },
    //设置坐标系
    initChartCoord(chart) {
      chart.coord('polar', { // 设置极坐标系
        transposed: true, // 坐标系翻转
        innerRadius: 0.7, // 内环半径，数值为 0 - 1 范围
        radius: 0.85 // 半径，数值为 0 - 1 范围
      });
      chart.axis(false);
    },
    //绘制图表内容
    initChartCircle(chart) {
      //设置图表类型
      chart.interval()
        .position('1*percent')
        .color('name', this.data.pieColors)
        .adjust('stack');
      //绘制图表的辅助元素-中心内容
      chart.guide().text({
        position: ['50%', '50%'],
        content: '3820', // 显示的文本内容
        style: {
          fill: '#666', // 文本颜色
          fontSize: '17', // 文本大小
          fontWeight: 'bold', // 文本粗细
          // rotate: Math.PI / 4 // 文本旋转，以弧度为单位
        }
      })
    }
  }
})